<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			body,
			html {
				margin: 0;
				padding: 0;
			}
			
			#top {
				width: 500px;
				height: 500px;
				position: relative;
			}
			
			.son {
				width: 10px;
				height: 10px;
				border-radius: 10px;
				position: absolute;
				animation: jay 2s linear;
				top: -50px;
			}
			
			@keyframes jay {
				from {
					background: red;
					top: -20%;
					transform: rotate(0deg);
				}
				to {
					background: yellow;
					top: 100%;
					transform: rotate(180deg);
					display: none;
				}
			}
			@-moz-keyframes jay{
				from {
					background: red;
					top: -20%;
					transform: rotate(0deg);
				}
				to {
					background: yellow;
					top: 100%;
					transform: rotate(180deg);
					display: none;
				}
			}
			@-webkit-keyframes jay{
				from {
					background: red;
					top: -20%;
					transform: rotate(0deg);
				}
				to {
					background: yellow;
					top: 100%;
					transform: rotate(180deg);
					display: none;
				}
			}
			@-ms-keyframes jay{
				from {
					background: red;
					top: -20%;
					transform: rotate(0deg);
				}
				to {
					background: yellow;
					top: 100%;
					transform: rotate(180deg);
					display: none;
				}
			}
			
			img {
				width: 100%;
				height: 100%;
				display: block;
			}
		</style>
	</head>

	<body>
		<div id="top">

		</div>
	</body>
	<script src="" type="text/javascript">
	</script>
	<script type="text/javascript">
		function suger() {
			var tops = document.getElementById('top');
			var num = parseInt(Math.random() * 20 + 10);
			for(var i = 0; i < num; i++) {
				var x = parseInt(Math.random() * 450 + 1);
				var div = document.createElement('div');
				tops.appendChild(div)
				var y = parseInt(Math.random() * 10 + 1);
				div.setAttribute('class', 'son');
				div.style.animationDelay = y * 0.1 + 's';
				div.style.left = x + 'px';
			}

		}
		suger();
		setInterval(function(){
			suger();
		},1000)
	</script>

</html>